<template>
  <div class="filter commodity-filter"><h2>{{ $t('HeaderItem2') }}</h2>
    <ul>
      <li class="first-item commodity-filter-item"
        :class="{'commodity-filter-item-active': cid === -1}"
      > {{$t('ProductAll')}}</li>
      <li class="commodity-filter-item"
          v-for="(item, index) in recommendCate" :key="index"
          @click="clickCateItem(item.id)"
          :class="{'commodity-filter-item-active': cid === item.id}"
      >
        <div class="list"> {{ item.name }} <i class="el-icon-arrow-right" style="margin-left: 5px;"></i></div><!---->
      </li>
    </ul>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from "vue-router";
const router = useRouter()
const emits = defineEmits(['clickCateItem'])
const props = defineProps({
  recommendCate: {
    type: Array,
    default: () => {
      return []
    }
  }
})
const cid = ref(-1)
cid.value = router.currentRoute.value.query.cid || -1
const clickCateItem = (arg) => {
  cid.value = Number(arg)
  emits('clickCateItem', arg)
}
</script>
<style scoped>
.commodity-filter .first-item {
  text-align: left;
  font-size: 14px;
}

.commodity-filter-item {
  font-size: 12px;
  padding: 20px 0px;
}

.commodity-filter-item .list {
  display: flex;
  align-items: center;
}

.commodity-filter-item .list-item {
  margin-top: 15px;
}

.commodity-filter-item .list-item li {
  text-indent: 10px;
  font-size: 12px;
  padding: 5px 0px;
  color: var(--color-black) !important;
}

.commodity-filter-item .list-item li.active, .commodity-filter-item .list-item li:hover {
  color: var(--color-price) !important;
}

.commodity-content-title {
  color: var(--color-black);
  padding: 22px 28px 0px;
  user-select: none;
  position: relative;
}

.commodity-content-title .search-content {
  position: absolute;
  right: -3px;
}

.commodity-content-title .search-content .el-input__inner {
  border-radius: 40px;
}

.commodity-content-title h2 {
  font-weight: 500;
  font-size: 14px;
  color: var(--color-black);
  margin-right: 43px;
}

.commodity-content-title .checked {
  color: red;
}

.commodity-content-title ul {
  margin-left: 0px;
}

.commodity-content-title li {
  margin-right: 46px;
  cursor: pointer;
}

.commodity-content-title li span {
  font-weight: 500;
  font-size: 14px;
  margin-right: 5px;
}

.commodity-content-title li > div {
  flex-direction: column;
}

.commodity-content-title .el-icon-caret-top {
  margin-bottom: -8px;
  font-size: 14px;
}

.commodity-content-title .el-icon-caret-bottom {
  font-size: 14px;
}

.commodity-content-title .sort-icon {
  height: 10px;
  position: relative;
  width: 14px;
}

.commodity-content-title .sort-icon i {
  color: rgb(217, 217, 217);
  position: absolute;
}

.commodity-content-title .sort-icon .sort-active {
  color: var(--color-main);
}

.commodity-content-title .sort-icon-up i {
  bottom: 4px;
}

.commodity-content-title .sort-icon-down i {
  top: -4px;
}

.commodity-wrap {
  align-items: flex-start;
  margin-top: -13px !important;
}

.commodity-wrap ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.commodity .commodity-wrap {
  min-height: calc(-361.5px + 100vh);
}

.commodity-filter {
  width: 180px;
  border-right: 1px solid var(--color-border);
}

.commodity-filter h2 {
  width: 100%;
  font-weight: 600;
  font-size: 16px;
  color: var(--color-title);
  border-bottom: 1px solid var(--color-border);
  padding: 20px 0px;
  margin-bottom: 20px;
}

.commodity-filter-item {
  width: 100%;
  font-weight: 400;
  font-size: 14px;
  color: var(--color-black);
  padding: 12px 0px;
  cursor: pointer;
}

.commodity-filter-item-active, .commodity-filter-item:hover {
  color: var(--color-price);
  border-right: 2px solid var(--color-price);
}

.commodity-content {
  width: 100%;
}

.commodity-content-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(186px, 165px));
  gap: 20px 11px;
  align-content: center;
  padding: 22px 28px;
}

.commodity-content-pagination {
  width: 100%;
  text-align: center;
  padding: 40px 0px;
}

.commodity .no-data {
  display: flex;
  justify-content: center;
}

</style>